<template >
  <div class="userElectricityAdd">
    <h2>添加电量</h2>
    <el-row>
      <el-col :span="6"><div class="txt">用户ID</div></el-col>
      <el-col :span="6"><div class="txt">电量</div></el-col>
      <el-col :span="6"><div class="txt">备注</div></el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="6"
        ><div class="input">
          <el-input
            v-model="id"
            placeholder="请输入ID"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
          ></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="input">
          <el-input
            v-model="value"
            placeholder="请输入电量"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
          ></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="input">
          <el-input v-model="remark" placeholder="请输入备注"></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="input">
          <el-button plain @click="electricAdd">确认</el-button>
        </div></el-col
      >
    </el-row>
    <h2>
      添加记录
      <el-input
        class="inputA"
        v-model="userId"
        placeholder="请输入用户ID"
        onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
      ></el-input>
      <el-button plain @click="search">搜索</el-button>
    </h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="添加时间"> </el-table-column>
      <el-table-column prop="userId" label="用户ID"> </el-table-column>
      <el-table-column prop="nikename" label="用户昵称"> </el-table-column>
      <el-table-column prop="electricity" label="电量"> </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { electricAdd, electricAddList } from "@/api/operationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      userId: "",
      id: "",
      value: "",
      remark: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    electricAdd() {
      if (this.id == "" || this.value == "") {
        this.$message({
          type: "error",
          message: "用户ID或电量不能为空！",
        });
        return;
      }
      electricAdd({ id: this.id, value: this.value, remark: this.remark }).then(
        (res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "添加成功",
            });
            this.getList();
            this.id = "";
            this.value = "";
            this.remark = "";
          } else {
            this.$message.error(res.message);
          }
        }
      );
    },
    getList() {
      electricAddList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
      }).then((res) => {
        if (res.code == 0) {
          this.total = res.data.total;
          this.tableData = res.data.list;
        }
      });
    },
    search() {
      this.page = 1;
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
.userElectricityAdd {
  .txt {
    text-align: center;
    font-size: 16px;
    font-size: 500;
  }
  .input {
    padding: 0 20px;
  }
  .inputA {
    display: inline-block;
    width: 200px;
    margin-left: 20px;
  }
  /deep/.el-table td,
  /deep/.el-table th.is-leaf {
    border: none !important;
  }
}
</style>